<template>
  <div class="team-slider">
    <div
      class="team-list beauty-scroller-bar"
      :style="{ height }"
      v-if="teamList.length > 0"
    >
      <div
        class="team-item"
        v-for="(item, index) of teamList"
        :key="index"
        @click="onTeamChange(item)"
        :class="currentTeam.id == item.id ? 'team-item-current' : ''"
      >
        <div class="flex align-center" style="flex: 1">
          <img
            :src="item.avatar"
            alt=""
            v-if="item.avatar"
            class="team-avatar"
          />
          <div v-else class="team-avatar-box">
            {{ item.name && item.name.length > 0 ? item.name.slice(0, 1) : "" }}
          </div>
          <div class="mr-10" style="flex: 1 1 0%">
            <div>{{ item.name || "-" }}</div>
            <div style="color: #666666; font-size: 12px">
              {{ item.id ? "团队/企业" : "个人" }}
            </div>
          </div>
        </div>
        <SwapOutlined
          :style="{ color: currentTeam.id == item.id ? '#5a54f9' : '' }"
        />
      </div>
    </div>
    <div v-else style="text-align: center; color: #999">
      {{
        state.team || !state.business ? "团队" : "企业"
      }}列表为空，请先创建新{{
        state.team || !state.business ? "团队" : "企业"
      }}
    </div>
    <div class="flex justify-center align-center mt-10">
      <a-button
        type="link"
        @click="addTeam(0)"
        v-if="state.team || !state.business"
        >创建新 团队/企业</a-button
      >
      <!-- <a-button type="link" @click="addTeam(1)" v-if="state.business || ! state.team">创建新企业</a-button> -->
    </div>

    <AddTeam
      :visible="addTeamVisible"
      @onClose="addTeamVisible = false"
      @success="addTeamSuccess"
      :business="is_business"
    />
  </div>
</template>

<script setup>
import { ref, watch, computed, reactive } from "vue";
import { SwapOutlined } from "@ant-design/icons-vue";
import { useTeam, useTeamState } from "../../hooks/team";
import AddTeam from "../AddTeam/index.vue";

const emit = defineEmits(["change"]);
const props = defineProps({
  height: {
    type: String,
    default: "100%",
  },
  team: {
    type: Boolean,
    default: false,
  },
  business: {
    type: Boolean,
    default: false,
  },
});

const state = reactive({
  team: props.team,
  business: props.business,
});

watch(
  () => props.team,
  (pTeam) => {
    state.team = pTeam;
    state.business = pTeam;
  }
);

watch(
  () => props.business,
  (pBusiness) => {
    state.team = pBusiness;
    state.business = pBusiness;
  }
);

const teamState = useTeamState();
const { teams, currentTeam, changeTeamId } = useTeam();

const teamList = computed(() => {
  if (state.team || state.business) {
    return teams.value.filter((item) => item.id);
  } else if (state.business) {
    return teams.value.filter((item) => item.is_business == 1);
  } else {
    return teams.value;
  }
});

const onTeamChange = async (team) => {
  await changeTeamId(team.id || 0);

  setTimeout(() => {
    emit("change", team);
  }, 0);
};

const addTeamVisible = ref(false);
const is_business = ref(0);

const addTeam = (isBusiness = 0) => {
  addTeamVisible.value = true;
  is_business.value = isBusiness;
  emit("addNewTeam");
};

const addTeamSuccess = () => {
  addTeamVisible.value = false;
  teamState.execute(200);
};
</script>

<style lang="less" scoped>
.team-slider {
  .team-list {
    overflow-y: auto;
  }

  .team-item {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 4px;
    cursor: pointer;

    &:hover {
      background-color: #f5f5f5;
    }

    &:last-child {
      margin-bottom: 0;
    }

    .team-avatar {
      width: 36px;
      height: 36px;
      object-fit: cover;
      border-radius: 50%;
      margin-right: 10px;
    }

    .team-avatar-box {
      width: 36px;
      height: 36px;
      background-color: #1890ff;
      border-radius: 50%;
      margin-right: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      font-size: 16px;
    }
  }
}
</style>
